<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录页面</title>
    <!--    <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>-->
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <link rel="stylesheet" th:href="@{/fonts/font-login/iconfont.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/floatMessage.css}">
    <script th:src="@{/js/captcha.js}" type="text/javascript"></script>
    <link rel="stylesheet" href="../static/fonts/font-login/iconfont.css"/>
    <link rel="stylesheet" href="../static/css/login.css"/>

</head>
<body>
<div id="floating-window" class="floating-window hidden">
    <p>这是一个飘窗提示!</p>
</div>
<div class="container">
    <div class="forms-container">
        <div class="signin-signup">
            <!--            登录页面-->
            <form class="sign-in-form" th:action="@{/blog/Login}">
                <h2 class="title">登录</h2>
                <div class="box">
                    <div class="input-field">
                        <i class="iconfont icon-dianhuahaoma">
                        </i>
                        <input type="text" placeholder="电话号码" id="phone" name="phone" required="required"/>
                        <i class="iconfont" id=" log-phone-judge">
                        </i>
                    </div>
                </div>
                <div class="box">
                    <div class="input-field">
                        <i class="iconfont icon-mima">
                        </i>
                        <input type="password" placeholder="密码" id="password" name="userpassword"
                               required="required"/>
                        <i class="iconfont" id=" log-password-judge">
                        </i>
                        <span class="password"></span>
                    </div>
                </div>
                <button type="submit" value="立即登录" class="btn solid enter " id="login">立即登录</button>
                <p th:text="${session.login_error_message}" style="color: red;font-size: 15px"></p>
            </form>
        </div>
    </div>
    <div class="panels-container">
        <div class="panel left-panel">
            <div class="content">
                <h3>加入我们</h3>
                <p>
                    加入我们，成为本站的一份子。
                </p>
                <button class="btn transparent" id="sign-up-btn" onclick="window.location.href='/blog/intoRegister'">
                    去注册
                </button>
            </div>
            <img th:src="@{/images/login/log.svg}" class="image" alt=""/>
        </div>
    </div>
</div>
<script th:src="@{/js/app.js}"></script>
<script src="../static/js/app.js"></script>
<script>
    //    function isValidPhoneNumber(phoneNumber) {
    //        // 中国手机号码的正则表达式
    //        let re = /^1[3-9]\d{9}$/;
    //        return re.test(phoneNumber);
    //    }
    //
    //    function isValidEmail(email) {
    //        let re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    //        return re.test(email);
    //    }
    //
    //    function isValidPassword(password) {
    //        // 8到20位数字字母组合
    //        let re = /^.{8,20}$/;
    //        return re.test(password);
    //
    //    }
    //
    //    function isValidUsername(username) {
    //        let re = /^.{1,10}$/;
    //        return re.test(username)
    //    }
    //
    //    // 定义显示飘窗的函数
    //    function showFloatingWindow(message, duration = 3000) {
    //        const $floatingWindow = $('#floating-window');
    //
    //        // 设置飘窗内容
    //        $floatingWindow.html(`<p>${message}</p>`);
    //
    //        // 显示并设置动画
    //        $floatingWindow.stop(true, true).fadeIn(200).animate({bottom: '20px'}, 300);
    //
    //        // 自动隐藏
    //        setTimeout(() => {
    //            $floatingWindow.animate({bottom: '-100px'}, 300, function () {
    //                $(this).fadeOut(200);
    //            });
    //        }, duration);
    //    }
    //
    //    //拓展 实现直接添加在输入框的后面
    //    $(document).ready(function () {
    //        /**
    //         * 注册
    //         */
    //        //电话格式判断
    //        $('#re_phone').blur(function () {
    //            if (isValidPhoneNumber($("#re_phone").val())) {
    //                $('#re-phone-judge').removeClass("icon-cuowu", "red")
    //                $('#re-phone-judge').addClass("icon-zhengque", "green")
    //            } else {
    //                // $('#numberError').text('号码格式不正确');
    //                $('#re-phone-judge').removeClass("icon-zhengque", "green")
    //                $('#re-phone-judge').addClass("icon-cuowu", "red")
    //                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
    //                // $('#emailInput').focus(function(e) { e.preventDefault(); });
    //            }
    //        });
    //        //电子邮件格式判断
    //        $('#re_email').blur(function () {
    //            if (isValidEmail($("#re_email").val())) {
    //                $('#re-email-judge').removeClass("icon-cuowu")
    //                $('#re-email-judge').addClass("icon-zhengque")
    //            } else {
    //                $('#re-email-judge').removeClass("icon-zhengque")
    //                $('#re-email-judge').addClass("icon-cuowu")
    //                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
    //                // $('#emailInput').focus(function(e) { e.preventDefault(); });
    //            }
    //        });
    //
    //        //密码的格式判断
    //        $('#re_password').blur(function () {
    //            if (isValidPassword($("#re_password").val())) {
    //                $('#re-password-judge').removeClass("icon-cuowu")
    //                $('#re-password-judge').addClass("icon-zhengque")
    //            } else {
    //                $('#re-password-judge').removeClass("icon-zhengque")
    //                $('#re-password-judge').addClass("icon-cuowu")
    //                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
    //                // $('#emailInput').focus(function(e) { e.preventDefault(); });
    //            }
    //        });
    //        //对用户名格式判断
    //        $('#re_username').blur(function () {
    //            if (isValidPassword($("#re_username").val())) {
    //                $('#re-username-judge').removeClass("icon-cuowu")
    //                $('#re-username-judge').addClass("icon-zhengque")
    //            } else {
    //                $('#re-username-judge').removeClass("icon-zhengque")
    //                $('#re-username-judge').addClass("icon-cuowu")
    //                // 如果需要阻止焦点移动到下一个输入框，可以取消注释以下代码
    //                // $('#emailInput').focus(function(e) { e.preventDefault(); });
    //            }
    //        });
    //
    //
    //        //注册按钮发送请求
    //        $("#register").click(function () {
    //            console.log("开始注册")
    //            if (isValidEmail($("#re_email").val())
    //                && isValidPhoneNumber($("#re_phone").val())
    //                && isValidPassword($("#re_password").val())
    //                && isValidUsername($('#re_username'))) {
    //                console.log("注册的用户信息均无误")
    //                showFloatingWindow("注册成功！")
    //                // let user = {
    //                //     role: 'ROLE_USER',
    //                //     username: $("#re_username").val(),
    //                //     userpassword: $("#re_password").val(),
    //                //     phone: $("#re_phone").val(),
    //                //     email: $("#re_email").val()
    //                // }
    //                // let jsonUser = JSON.stringify(user)
    //                // $.ajax({
    //                //     url: "/blog/register",
    //                //     data: jsonUser,
    //                //     type: "post",
    //                //     contentType: "application/json;charset=UTF-8",//告诉服务器发送请求的数据格式为JSON
    //                //     success: function (response) {
    //                //         if (response.status === 1) {
    //                //             console.log("注册成功")
    //                //         } else {
    //                //             console.log("注册失败")
    //                //         }
    //                //         showFloatingWindow(response.message)
    //                //     },
    //                // })
    //            } else {
    //                showFloatingWindow('抱歉，请检查您输入的内容，内容格式有问题', 5000);
    //            }
    //        })
    //    })
</script>
</body>
</html>